<template>
    <div>
        <table>
            昵称<input type="text" v-model="cs.nname">——<input type="date" v-model="cs.timea">-
            <input type="date" v-model="cs.timeb">
            <input type="button" value="查询" @click="show()">
        </table>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>用户名称</td>
                    <td>昵称</td>
                    <td>会员等级</td>
                    <td>图片</td>
                    <td>使用次数</td>
                    <td>年龄</td>
                    <td>地址</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in as.row" :key="a.id">
                    <td>{{ a.id }}</td>
                    <td>{{ a.name }}</td>
                    <td>{{ a.nname }}</td>
                    <td>{{ a.sname }}</td>
                    <td><img :src="a.img" width="100" height="100"></td>
                    <td>{{ a.age }}</td>
                    <td>{{ a.time }}</td>
                    <td>{{ a.address }}</td>
                    <td>{{ a.tyle == true ? "启用" : "禁用" }}</td>

                    <td>
                        <input type="button" value="修改状态" @click="xiu(a.id)">
                        <input type="button" value="修改会员" @click="up(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>当前{{ cs.pageindex }}页</span>--
        <span>共{{ as.pagecount }}条</span>--
        <span>当前{{ cs.pageindex }}/{{ as.sizecount }}页</span>
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(cs.pageindex - 1)">
        <span v-for="a in as.sizecount" @click="fy(a)">{{ a }}</span>
        <input type="button" value="下一页" @click="fy(cs.pageindex + 1)">
        <input type="button" value="尾页" @click="fy(as.sizecount)">
        <input type="number" v-model="cs.pageindex">
        <input type="button" value="跳转" class="btn btn-warning" @click="fy(cs.pageindex)">
        <select v-model="cs.pagesize" @click="list">
            <option :value="a" v-for="a in page">{{ a }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from "vue";
import moment from 'moment';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let page: any = ref([2, 4, 6, 8]);
let cs: any = reactive(
    {
        pageindex: 1,
        pagesize: 2,
        nname: '',
        timea: '',
        timeb: ''
    }
)
let as: any = reactive(
    {
        pagecount: 0,
        sizecount: 0,
        row: []
    }
)
//就绪函数
onMounted(() => {
    show();
})
//页容量
const list = () => {
    show();
}
//分页
const fy = (f: any) => {
    if (f < 1) {
        cs.pageindex = 1;
        return;
    }
    if (f > as.sizecount) {
        cs.pageindex = as.sizecount;
        return;
    }
    cs.pageindex = f;
    show();
}
//显示
const show = () => {
    axios({
        url: 'https://localhost:7104/api/Emp/showh',
        method: 'get',
        params: cs
    })
        .then(res => {
            console.log(res);
            as.pagecount = res.data.pagecount;
            as.sizecount = res.data.sizecount;
            as.row = res.data.row;
        })
        .catch(err => {
            console.log(err);

        })
}
//改状态
const xiu = (id: any) => {
    var f = confirm("确认修改状态吗");
    if (f) {
        axios(
            {
                url: 'https://localhost:7104/api/Emp/xiuh',
                method: 'get',
                params: {
                    id: id
                }
            })
            .then(res => {
                console.log(res);
                alert("修改成功");
                show();
            })
            .catch(err => {
                console.log(err);
            })
    }
}
//删除
//修改
const up = (id: any) => {
    var f = confirm("确认修改会员吗");
    if (f) {
        router.push({
            path: "/Hupdate",
            query: {
                id: id
            }
        })
    }
}
</script>

<style scoped></style>